<template>
  <view class="content">
    <view class="topBox">
    
    </view>

    <view class="list">
		
			<view class="item" v-if="historyPrizeList.length==0">
				<view class="container">
					<uni-load-more :status="status" :content-text="contentText" />
				</view>
			</view>
      <view class="item" v-for="(item, index) in historyPrizeList">
        <image
          :src="item.poster"
          mode="aspectFill"></image>
        <view class="rightBox">
          <view class="tit">
            <text>{{item.name}}</text>
            <text></text>
          </view>
          <view class="priceBox">
            <view class="prices">
              <text>{{item.price}}金币</text>
              <text></text>
            </view>
            <!-- <view class="tag">
              省2.2
            </view> -->
          </view>
          <view class="btnBox">
            <view class="barBox1">
				
              <view class="sheng">
				支付宝账号:{{item.alipayAccount}}
              </view>
              <view class="bar">
                <liu-progressbar :progress="80" bgColor="red" color="#FFFFFF" :height="'20rpx'" />
              </view>

            </view>

           
          </view>
		  
		  <view class="btnBox">
		    <view class="barBox">
		      <view class="sheng">
		  				
		      </view>
		      <view class="bar">
		        <liu-progressbar :progress="80" bgColor="red" color="#FFFFFF" :height="'20rpx'" />
		      </view>
		  
		    </view>
		  
		    <view class="btn1" v-if="item.status==0">
		      待支付
		    </view>
			<view class="btn" v-if="item.status==1">
			  已支付
			</view>
		  </view>
		  
		  
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import store from '@/store/index.js';//需要引入store
  export default {
	  computed:{
	  	
	  	
	  	historyPrizeList(){
	  		return store.state.prize.historyPrizeList
	  	},
	  
	  },
    data() {
      return {
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '暂无数据'
		},
		status: 'nomore',
		pageNum:1,
		baseData: {
			userId:'',
			income:0,
			
		},
      }
    },
	onLoad(option) {
		//加载新闻通知数据
		this.$data.pageNum=1;
		store.dispatch('loadHistoryPrizeData',{"pageNum":this.$data.pageNum,"pageSize":99})
		
		this.baseData.userId=uni.getStorageSync("userId");
		this.baseData.income=uni.getStorageSync("income");
		
		
		// uni.startPullDownRefresh();
	},
    methods: {
		buy(item){
			var self=this;
			
			if(item.number>0){
				if(self.baseData.income>=item.price){
					uni.showModal({
						title: '提示',
						content: '您确定要兑换吗',
						success: function(res) {
							if (res.confirm) {
								console.log(uni.getStorageSync("income"))
								console.log(uni.getStorageSync("userId") )
								uni.setStorageSync('prizeItem', JSON.stringify(item));
								uni.navigateTo({
									url:"/pages/user/prizePay"
								})
								// self.$data.pageNum=1;
								// var data={"userId":self.$data.baseData.userId,"priceId":item.id};
								// store.dispatch('exchangePrizeData',data).then(() => {
								// 	console.log(id)
								// 	store.dispatch('loadPrizeData',{"pageNum":self.$data.pageNum,"pageSize":10})
								// 	uni.showToast({
								// 		title:"删除成功",
								// 		icon:'none'
								// 	})
								// })
							} else if (res.cancel) {
								// console.log('用户点击取消')
							}
						}
					})
				}else{
					uni.showToast({
						title:"金币不足",
						icon:'none'
					})
				}
			
			}else{
				uni.showToast({
					title:"兑换物品数量不足",
					icon:'none'
				})
			}
			console.log(JSON.stringify(item))
		},
    }
  }
</script>

<style scoped>
  .content {
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  .topBox {
    height: 100rpx;
    background: linear-gradient(to right, #00aaff, #ff00a5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    text-align: center;
    font-size: 55rpx;
    color: #fff;
    font-weight: 700;
    letter-spacing: 10rpx;
  }

  .list {
    width: 96%;
    height: 60vh;
    margin: -5% auto 2%;
  }

  .item {
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 15rpx;
  }

  .item image {
    width: 240rpx;
    height: 240rpx;
    border-radius: 20rpx;
  }

  .item .rightBox {
    width: calc(100% - 260rpx);
    height: 100%;
  }

  .tit {
    margin-bottom: 20rpx;
  }

  .tit text:nth-child(1) {
    font-size: 28rpx;
    font-weight: 550;
    color: #ff007f;
    margin-right: 20rpx;
  }

  .tit text:nth-child(2) {
    font-size: 26rpx;
    color: #333;
    margin-right: 20rpx;
  }

  .priceBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .prices text:nth-child(1) {
    font-size: 30rpx;
    font-weight: 550;
    color: #ff007f;
    margin-right: 10rpx;
  }

  .prices text:nth-child(2) {
    font-size: 24rpx;
    color: #999;
    margin-right: 20rpx;
    text-decoration: line-through;
  }

  .tag {
    padding: 2rpx 6rpx;
    box-sizing: border-box;
    border: 1px solid #ff007f;
    font-size: 20rpx;
    color: red;
    border-radius: 4rpx;
  }

  .btnBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .barBox {
    width: 50%;
    margin-right: 44rpx;
  }
.barBox1 {
    width: 100%;
    margin-right: 44rpx;
  }
  .sheng {
    font-size: 24rpx;
    color: #777;
    margin-bottom: 10rpx;
  }

  .btn {
    width: 150rpx;
    line-height: 50rpx;
    background-color: #ff007f;
    text-align: center;
    font-size: 30rpx;
    color: #fff;
    font-weight: 700;
    border-radius: 30rpx;
  }
  .btn1 {
    width: 150rpx;
    line-height: 50rpx;
    background-color: #cccccc;
    text-align: center;
    font-size: 30rpx;
    color: #fff;
    font-weight: 700;
    border-radius: 30rpx;
  }
  
  
</style> 